<template>
	<view>
		<!-- <view class="" :style="'height:'+statusBarHeight+'rpx'"></view> -->
		<u-navbar
			title="个人资料"
			rightText="保存"
			@leftClick="leftClick"
			@rightClick="rightClick"
			:placeholder="true"
			style="font-weight: bold;"
		>
		</u-navbar>
		
		<view class="line">
			
		</view>
		<view class="personal">
			<view class="">
				个人资料
			</view>
			<view class="" @click="show = true">
				<image :src="userInfo.avatar" mode=""></image>
			</view>
		</view>
		<view class="personal personal_name">
			<view class="">
				昵称
			</view>
			<view class="" style="text-align: right;">
				<input type="text" v-model="userInfo.nickname" placeholder="请输入昵称" />
			</view>
		</view>
		<view class="">
			<u-overlay :show="show" >
				<view class="showtext" >
					<view class="textname" @click="btnchoose(['camera'])">
						拍摄
					</view>
					<view class="textname" @click="btnchoose(['album'])">
						相册
					</view>
					<view class="line">
						
					</view>
					<view class="textname" @click="show = false">
						取消
					</view>
				</view>
			</u-overlay>
		</view>
	</view>
</template>

<script>
export default {
		data() {
			return {
				uploadProgress: 100, //头像上传进度
				tempAvatar: '',
				userInfo: {},
				dateString: '',
				type: 'date',
				show:false,
				statusBarHeight:0
			}
		},
		computed: {
			indicatorStyle() {
				return {
					background: 'rgba(255,0,0,.2)',
					height: '40px',
				};
			}
		},
		onLoad() {
			this.$fun.ajax.post('user/index', {}).then(res => {
				if (res.code == 1) {
					this.userInfo = res.data
				}
			})
		},
		onShow() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
		},
		methods: {
			rightClick() {
				console.log('rightClick');
			},
			leftClick() {
				console.log('leftClick');
				uni.navigateBack()
			},
			/**
			 * isShowToolBar：true 点击确定获取数值
			 * isShowToolBar：false 滑动获取返回数据
			 */
			dateTimeChange(value) {
				this.userInfo.birthday = value
			},
			//提交修改
			async rightClick() {
				const {
					userInfo,
				} = this;
				if (!userInfo.avatar && userInfo.avatar.slice(0, 10) != 'data:image') {
					console.log(userInfo.avatar)
					this.$fun.msg('请上传头像');
					// this.$refs.confirmBtn.stop();
					return;
				}
				if (!userInfo.nickname) {
					this.$fun.msg('请输入您的昵称');
					// this.$refs.confirmBtn.stop();
					return;
				}
				// let userDate = {
				// 	avatar: userInfo.avatar,
				// 	nickname: userInfo.nickname,
				// }
				// const res = await this.$fun.ajax.post('/user/profile',{ ...userDate
				// }).then(res => {
				// 	if (res.code == 1) {
				// 		this.$fun.msg('修改成功')
				// 		setTimeout(()=>{
				// 			uni.navigateBack({
								
				// 			})
				// 		},1200)
				// 	}
				// })
			},
			//选择头像
			btnchoose(type) {
				let _this = this;
				uni.chooseImage({
					count: 1,
					sourceType:type,
					success: res => {
						uni.showLoading({
							title: '上传中',
						});
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: this.$baseUrl + '/api/common/upload', // 仅为示例，非真实的接口地址 
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								token: uni.getStorageSync('token'),
								contentType: "application/json"
							},
							success(res) {
								var res = JSON.parse(res.data)
								_this.userInfo.avatar = res.data.fullurl
								uni.showToast({
									title: "上传成功",
									icon: "none"
								});
								setTimeout(() => {
									uni.hideLoading()
								}, 1000);
							},
						})
					}
				});
			},
			//裁剪回调
			async setAvatar(filePath) {
				this.tempAvatar = filePath;
				this.uploadProgress = 0;
				const result = await uniCloud.uploadFile({
					filePath: filePath,
					cloudPath: +new Date() + ('000000' + Math.floor(Math.random() * 999999)).slice(-6) + '.jpg',
					onUploadProgress: e => {
						this.uploadProgress = Math.round(
							(e.loaded * 100) / e.total
						);
					}
				});
				if (!result.fileID) {
					this.$util.msg('头像上传失败');
					return;
				}
				if (typeof uniCloud.getTempFileURL === 'undefined') {
					this.userInfo.avatar = result.fileID;
				} else {
					const tempFiles = await uniCloud.getTempFileURL({
						fileList: [result.fileID]
					})
					const tempFile = tempFiles.fileList[0];
					if (tempFile.code === 'SUCCESS') {
						this.userInfo.avatar = tempFile.download_url;
					} else {
						this.$util.msg('头像上传失败');
					}
				}
			},
			//修改性别
			changeGender(gender) {
				this.userInfo.gender = gender
			},
			//公开信息
			onSwitch(e) {
				this.userInfo.anonymous = !e.detail.value;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
.line{
	// margin-top: 88rpx;
	width: 750rpx;
	height: 16rpx;
	background: #F2F2F2;
}
.personal{
	height: 200rpx;
	background: #FFFFFF;
	font-family: PingFangSC, PingFang SC;
	font-weight: bold;
	font-size: 28rpx;
	color: #19181A;
	text-align: left;
	font-style: normal;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;
	align-items: center;
	image{
		width: 140rpx;
		height: 140rpx;
		border-radius: 24rpx;
	}
}
.personal_name{
	// width: 750rpx;
	height: 100rpx;
	background: #FFFFFF;
	border-bottom: 1rpx solid #EAEAEA;
	border-top: 1rpx solid #EAEAEA;
	margin: 0;
	padding: 0 30rpx;
}
.showtext{
	width: 750rpx;
	// height: 316rpx;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	position: absolute;
	bottom: 0;
	background-color: #FFFFFF;
	.line{
		margin-top: 0;
	}
	.textname{
		line-height: 100rpx;
		text-align: center;
	}
}
</style>
